<template>
  <div class="login-body">
    <div class="login">
      <div class="login-title">登 录</div>
      <div class="login-input">
        <el-tag size="small">账号</el-tag>
        <el-input clearable v-model="data.account"></el-input>
      </div>
      <div class="login-input">
        <el-tag size="small">密码</el-tag>
        <el-input clearable type="password" v-model="data.password"></el-input>
      </div>
      <div class="login-input">
        <el-button style="width: 100%" type="primary" @click="events.logins"
          >登录</el-button
        >
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { logins } from "@/api/login";
import type Login_Data_Dto from "@/dto/request/login";
import Api_Code from "@/dto/response/Api_Code";
import { set_token } from "@/utils/auth";
import { close_loading, start_loading } from "@/utils/loading";
import { ElMessage } from "element-plus";
import { reactive } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();

//组合式api
const data = reactive<Login_Data_Dto>({
  account: "18670837204",
  password: "123456",
});

const events = {
  /**
   * 登录
   */
  async logins() {
    //没有this
    //在此处进行加载
    start_loading();
    const res = await logins({
      account: data.account,
      password: data.password,
    });

    close_loading();

    if (res.code === Api_Code.ok) {
      set_token(res.data.toString());
      start_loading("正在进入主页");
      router.push("/home");
    } else {
      ElMessage.error(res.message);
    }
  },
};
</script>

<style scoped>
.login-body {
  height: 100vh;
  background: linear-gradient(220.55deg, #7cf7ff 0%, #4b73ff 100%);
  /* background-image: linear-gradient(to right, #ffecd2 0%, #fcb69f 100%); */
}

.login {
  width: 350px;
  margin: 0 auto;
  border: 1px solid #eee;
  background-color: #fff;
  padding: 16px;
  border-radius: 4px;
  position: relative;
  top: 60px;
}

.login-title {
  text-align: center;
  font-size: 20px;
  /* color:#010f0f; */
  border-bottom: 1px solid #eee;
}

.login-input {
  margin-top: 10px;
}
</style>
